<template>
  <div class="box">
    <!-- 检索 -->
    <div class="s-box">
      <div class="search-box">
        <div
          class="btn-box"
          @click="showPanel"
        >高级搜索</div>
        <el-input
          placeholder="请输入人才名称"
          v-model="searchTxt"
          @keydown.enter.native="search()"
          class="elinp"
          @change="changeInput"
        >
          <i
            class="iconfont"
            slot="prefix"
          >&#xe600;</i>
        </el-input>
        <el-button
          slot="append"
          @click="search()"
          class="search-button"
        >搜索</el-button>
      </div>
    </div>
    <AdvancedPanel
      v-show="showAdvancedPanel"
      ref="advancedPanel"
      @search="search"
    />
    <ResultList
      ref="resultList"
      :advancedForm="advancedForm"
      :searchTxt="searchTxt"
    />
  </div>
</template>

<script>
import ResultList from "./ResultList.vue";
import AdvancedPanel from "./AdvancedPanel.vue";
export default {
  components: {
    ResultList,
    AdvancedPanel
  },
  data() {
    return {
      searchTxt: "",
      showAdvancedPanel: false,
      advancedForm: {},
    };
  },
  beforeMount() {
    if (this.$route.query.keyword) {
      this.searchTxt = this.$route.query.keyword;
    }
  },
  methods: {
    showPanel() {
      this.showAdvancedPanel = !this.showAdvancedPanel;
    },
    changeInput() {
      this.$refs.advancedPanel.changeTag("全部");
      this.$refs.advancedPanel.advancedForm = {
        partyOrganId: null, // 产业领域
        area: null // 注册地区
      };
    },
    search(advancedForm) {
      this.showAdvancedPanel = false;
      if(advancedForm) {
        this.advancedForm = advancedForm;
        this.$refs.resultList.search(this.advancedForm, 1);
      } else {
        this.$router.push({
          name: "PDSearchResult",
          query: {
            keyword: this.searchTxt,
            ipi: 1,
          },
        });
        this.advancedForm = {}
        this.$refs.resultList.search({}, 1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: calc(100vh - .7rem);
  display: flex;
  flex-direction: column;
  position: relative;
  .s-box {
    flex: none;
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0.18rem 0;
    background: #fff;
    .search-box {
      position: relative;
      width: 10.3rem;
      display: flex;
      margin: 0 auto;
      .btn-box {
        width: 1rem;
        flex: none;
        font-size: 0.18rem;
        font-weight: 700;
        color: $mainColor;
        line-height: 0.54rem;
        cursor: default;
      }
      .elinp {
        position: relative;
        ::v-deep {
          .el-input__inner {
            height: 0.54rem;
            line-height: 0.54rem;
            padding-left: 0.76rem;
            border-color: $mainColor;
            border-radius: 0.08rem;
            font-size: 0.18rem;
            color: #283146;
            &:focus {
              border-color: $mainColor;
            }
          }
          .el-input__prefix {
            height: 0.32rem;
            width: 0.6rem;
            line-height: 0.32rem;
            border-right: 1px solid #dbdef2;
            margin-top: 0.12rem;
            i {
              font-size: 0.3rem;
              color: $mainColor;
              font-weight: 700;
            }
          }
        }
        .search-icon {
          position: absolute;
          top: 0;
        }
      }
      .search-button {
        width: 0.94rem;
        height: 0.54rem;
        border-radius: 0.08rem;
        font-size: 0.18rem;
        color: #fff;
        background-color: $mainColor;
        margin-left: 0.14rem;
      }
    }
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: transform 0.4s ease-in-out;
  }
  .fade-enter,
  .fade-leave-active {
    transform: translate3d(0, -100%, 0);
  }
}
.elcascader,
.elselect {
  width: 100%;
  ::v-deep {
    .el-input__inner {
      height: 0.4rem;
      line-height: 0.4rem;
    }
  }
}
</style>
